<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		var arr = ["imgs/1.jpeg","imgs/2.jpeg","imgs/3.jpeg","imgs/4.jpeg"];
		var i=0;
		// var btn = document.getElementById("img");
		function show2(){
			if(i==0){
				i=arr.length;
			}
			i--;
			img.src = arr[i];
		}
		function show(){
			if(i==(arr.length-1)){
				i=-1;
			}
			i++;
			img.src = arr[i];
		}

		
	</script>
	<style>
		img{
			width: 300px;
			height: 400px;
		}
		#color{
			width: 150px;
			height: 150px;
			background-color: pink;
		}
		#txt{
			width: 200px;
			height: 35px;
		}
	</style>
</head>
<body>
	<button onclick="show2()">上一张</button>
    <img src="imgs/1.jpeg" id="img">
	<button onclick="show()">下一张</button>
	<div id="color" onmouseover="oover()" onmouseout="oout()"></div>
	<input onfocus="focuss(this)" id="txt" onblur="loseblur()"   onchange="change1(this)">
	<script type="text/javascript">
		function change1(obj){
			obj.style.color="red";
		}
		function loseblur(){
			var txt = document.getElementById("txt");
			txt.style.borderColor ="pink";
		}
		function focuss(obj){
			obj.style.borderColor ="blue";
			obj.style.color="black";
		}
		var color = document.getElementById("color");
		function oover(){
			color.style.backgroundColor = "tomato";
		}
		function oout(){
			color.style.backgroundColor = "green";
		}	
	</script>
</body>
</html>